<template>
    <div class="bg flex">
        <div class="content-div">
            <h1 class="title">作品展示</h1>
            <div class="btn-box flex">
                <div class="btn btn0" @click="handleNavigation('/works/draw')">绘画</div>
                <div class="btn btn1" @click="handleNavigation('/works/write')">书法</div>
                <div class="btn btn2" @click="handleNavigation('/works/code')">代码</div>
                <div class="btn btn3" @click="handleNavigation('/works/life')">日常</div>
            </div>
            <div class="content-views">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
    name: 'Works',
    setup() {
        const router = useRouter()

        const handleNavigation = (path) => {
            router.push(path)
        }

        return {
            handleNavigation
        }
    }
}
</script>

<!-- 渐变背景 -->
<style scoped>
.bg {
    width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);
    animation: hueRotate 10s infinite alternate;
    overflow: scroll;
}

@keyframes hueRotate {
    100% {
        filter: hue-rotate(360deg);
    }
}

.title {
    font-size: 50px;
    text-align: center;
}
</style>

<!-- 按钮样式 -->
<style lang="scss" scoped>
.content-div {
    position: relative;
    z-index: 1;
    background-color: rgba(#faf9fa, 0.8);
    border-radius: 15px;
    margin: auto;
    padding: 50px;
    margin-top: 100px;
    height: auto;
    width: 80%;
    border: 2px solid;
}

:root {
    --color: #0ebeff;
}

@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

.btn {
    position: relative;
    z-index: 0;
    width: 160px;
    height: 80px;
    line-height: 80px;
    color: var(--color);
    font-size: 24px;
    border-radius: 10px;
    text-align: center;
    margin: auto;
    overflow: hidden;
    cursor: pointer;
    transition: .3s;
    -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(21, 3, 61, 0.4));

    &:hover {
        color: #fff;
        box-shadow: 0 0 5px var(--color), 0 0 25px var(--color);

        &::after,
        &::before {
            transition: .3s;
            background: var(--color);
        }
    }

    &::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 150%;
        height: 300%;
        background-color: #180236;
        background-repeat: no-repeat;
        background-size: 50% 50%;
        background-position: 0 0;
        background-image: conic-gradient(var(--color), var(--color));
        animation: rotate 2s linear infinite;
    }

    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 2px;
        top: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        background: #250143;
        border-radius: 10px;
    }
}

.btn0 {
    --color: #0ebeff;
}

.btn1 {
    --color: #ff00ff;
}

.btn2 {
    --color: #00ff00;
}

.btn3 {
    --color: #ff0000;
}
</style>

<style scoped>
.title {
    font-size: 50px;
    text-align: center;
}

.content-views {
    margin-top: 100px;
    padding: 20px;
    height: auto;
    width: 100%;
    border-radius: 30px;
}
</style>
